<template>
  <div class="card-component">
    <div class="card-content">
      <div class="card-content-title">基础信息</div>
      <el-button type="primary" class="submit-btn" @click="editData" v-if="flag"
        >编辑</el-button
      >
      <el-button type="primary" class="reset-btn" @click="editData" v-if="!flag"
        >取消</el-button
      >
      <el-button type="primary" class="submit-btn" @click="submitForm" v-if="!flag"
        >保存</el-button
      >
    </div>
    <!-- 详情 -->
    <div v-if="flag">
      <div class="pictures">
        <div v-for="url in srcList" :key="url" class="pictureList">
          <el-image
            class="picture"
            :preview-src-list="srcList"
            fit="cover"
            :src="url"
          ></el-image>
        </div>
      </div>
      <div class="content">
        <el-row>
          <el-col :span="6">
            <el-row>
              <div class="label">场库名称：</div>
              <div class="title">{{ detailList.data.name }}</div>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row>
              <div class="label">物业名称：</div>
              <div class="title">{{ detailList.data.comName }}</div>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row>
              <div class="label">运营状态：</div>
              <div class="title">
                {{
                  detailList.data.status == 1
                    ? "营业中"
                    : detailList.data.status == 2
                    ? "车位已满"
                    : detailList.data.status == 3
                    ? "已停用"
                    : "-"
                }}
              </div>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row>
              <div class="label">车场类别：</div>
              <div class="title">{{ detailList.data.statusName }}</div>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-row>
              <div class="label">建筑类别：</div>
              <div class="title">
                {{ detailList.data.typeName }}
              </div>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row>
              <div class="label">是否含套场：</div>
              <div class="title">{{ detailList.data.infield == true ? "是" : "否" }}</div>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row>
              <div class="label">
                {{ detailList.data.infield == true ? "外场" : "总" }}泊位数：
              </div>
              <div class="title">
                {{ detailList.data.totalSpaces }}
              </div>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row>
              <div class="label">套场泊位数：</div>
              <div class="title">{{ detailList.data.inSpaces }}</div>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-row>
              <div class="label">经度：</div>
              <div class="title">
                {{ detailList.data.longitude }}
              </div>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row>
              <div class="label">纬度：</div>
              <div class="title">{{ detailList.data.latitude }}</div>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <div class="label">具体位置：</div>
              <div class="title">
                {{ detailList.data.address }}
              </div>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-row>
              <div class="label">联系人：</div>
              <div class="title">{{ detailList.data.link }}</div>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row>
              <div class="label">联系电话：</div>
              <div class="title">{{ detailList.data.phone }}</div>
            </el-row>
          </el-col>
          <el-col :span="6"> </el-col>
          <el-col :span="6"> </el-col>
        </el-row>
      </div>
    </div>
    <!-- 编辑 -->
    <div v-if="!flag">
      <BasicInformationEdit
        :editOrderDetails="detailList.data"
        :listData="listData"
        @edit="getEdit"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, defineProps, onMounted, watch } from "vue";
import BasicInformationEdit from "./basicInformation-edit.vue";
import { getEditCpark } from "../request.js";
import { getDictionary } from "@/service/modules/publicModule";
import { useRoute } from "vue-router";
const route = useRoute();

const emits = defineEmits(["buttons"]);

const props = defineProps({
  orderDetails: {
    type: Object,
    default: () => {},
  },
  listData: {
    type: Object,
    default: () => {},
  },
});

const editData = () => {
  flag.value = !flag.value;
  //   getData();
};

const editForm = reactive({
  data: {},
});

const submitForm = () => {
  console.log(editForm.data);
  if (editForm.data.comId) {
    listData.comNameList.forEach((item) => {
      if (editForm.data.comId == item.key) {
        editForm.data.comName = item.value;
      }
    });
    const contactInfo = {
      name: editForm.data.link,
      phone: editForm.data.phone,
    };
    editForm.data.contacts = JSON.stringify(contactInfo);
    getEditCpark({
      id: route.query.id,
      data: editForm.data,
    }).then((res) => {
      if (res.data.code === 0) {
        ElMessage({
          type: "success",
          message: res.data.result,
        });
        flag.value = !flag.value;
        emits("buttons", "submit");
      } else {
        ElMessage.error(res.data.msg);
      }
    });
  } else {
    flag.value = !flag.value;
    emits("buttons", "submit");
  }
};

// 编辑相关操作

const getEdit = (value) => {
  console.log(value);
  editForm.data = value;
  const contactInfo = {
    name: value.link,
    phone: value.phone,
  };
  editForm.data.contacts = JSON.stringify(contactInfo);
};

const flag = ref(true);

const detailList = reactive({
  data: {},
});

const srcList = ref([]);
const getData = () => {
  detailList.data = props.orderDetails;
  try {
    const contacts = JSON.parse(detailList.data.contacts);
    detailList.data.link = contacts.name;
    detailList.data.phone = contacts.phone;
  } catch (error) {}

  try {
    const images = detailList.data.image.split("|");
    // 确保数组有足够的元素
    if (images.length >= 3) {
      let img1 = "https://cippfile.ecaray.com/" + images[0];
      let img2 = "https://cippfile.ecaray.com/" + images[1];
      let img3 = "https://cippfile.ecaray.com/" + images[2];
      srcList.value = [img1, img2, img3];
    } else if (images.length == 2) {
      let img1 = "https://cippfile.ecaray.com/" + images[0];
      let img2 = "https://cippfile.ecaray.com/" + images[1];
      srcList.value = [img1, img2];
    } else {
      srcList.value = "https://cippfile.ecaray.com/" + images; // 只使用存在的图片
    }
  } catch (error) {}
};

const listData = reactive({
  comNameList: [],
  statusList: [],
  categoryList: [],
  typeList: [],
});

const init = async () => {
  // 物业名称
  listData.comNameList = props.listData.comNameList;
  // 运营状态
  listData.statusList = props.listData.statusList;
  listData.statusList.forEach((item) => {
    if (detailList.data.status == item.id) {
      detailList.data.statusName = item.name;
    }
  });
  // 车场类别
  listData.categoryList = props.listData.categoryList;
  // 建筑类别
  listData.typeList = props.listData.typeList;
  listData.typeList.forEach((item) => {
    if (detailList.data.type == item.id) {
      detailList.data.typeName = item.name;
    }
  });
};

getData();

onMounted(() => {
  watch(
    () => props.orderDetails,
    (newVal, oldVal) => {
      if (newVal) {
        getData();
      }
    },
    {
      immediate: true, // 立即执行一次
      deep: true, // 深度监听对象内部变化
    }
  );
  watch(
    () => props.listData,
    (newVal, oldVal) => {
      if (newVal) {
        init();
      }
    },
    {
      immediate: true, // 立即执行一次
      deep: true, // 深度监听对象内部变化
    }
  );
});
</script>

<style lang="less" scoped>
.card-component {
  .card-content {
    margin-bottom: 37px;
    display: flex;
    align-items: center;
  }
  .card-content-title {
    font-weight: 600;
    font-size: 26px;
    color: #333333;
    margin-right: 12px;
  }
  .content > .el-row {
    margin-top: 20px;
  }
  .label {
    font-weight: 400;
    font-size: 14px;
    color: #666666;
  }
  .title {
    font-weight: 400;
    font-size: 14px;
    color: #333333;
  }
  .reset-btn {
    background: #f2f3f5;
    border: 1px solid #f2f3f5;
    border-radius: 2px;
    color: #333333;
    padding: 5px 16px;
  }
  .submit-btn {
    background: #007aff;
    border: 1px solid #007aff;
    border-radius: 2px;
    padding: 5px 16px;
  }
  .pictures {
    display: flex;
  }
  .pictureList {
    margin-right: 20px;
  }
  .picture {
    width: 200px;
    height: 120px;
  }
}
</style>
